<template>
  <div>
    <PlanItem :planList="planList.list" from="dashboard" @buyNowFn="buy" />
    <button v-if="planList.total > planList.list.length" class="load-more ftz16" @click="loadMore">
      <template v-if="planList.isLoadingMore">
        <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
        <span>正在加载，请稍候......</span>
      </template>
      <span v-else>点击加载更多...</span>
    </button>
    <EvaluatingBox :showFlag="showEvaluatingBoxFlag" @closeFn="ctrlEvaluatingBox" />
  </div>
</template>

<script>
import PlanItem from '@/components/plan/plan-item'
import EvaluatingBox from '@/components/plan/evaluating-box'
import { mapState } from 'vuex'
import {
  mySubscribedPlan
} from '@/service/api'
export default {
  components: {
    PlanItem,
    EvaluatingBox
  },
  data () {
    return {
      id: '',
      planList: {
        list: [],
        total: 0,
        isLoadingMore: false
      },
      // 问题列表查询参数
      searchData: {
        pageSize: 5,
        pageNum: 1
      },
      showEvaluatingBoxFlag: false // 是否显示评测提示窗口
    }
  },
  computed: {
    ...mapState({
      me: state => state.me || {}
    })
  },
  mounted () {
    this.$nextTick(() => {
      this.id = this.$route.params.id
      this.showLoadingModal()
      this.initDataList()
    })
  },
  methods: {
    showLoadingModal () {
      if (window.layer) {
        this.layerLoad = window.layer.load(0, {
          shade: false
        })
      }
    },
    closeLoadingModal () {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    },
    /**
     * 初始化页面数据，多个ajax同时请求
     */
    initDataList () {
      Promise.all([
        this.getPlanList()
      ]).then((res) => {
        this.closeLoadingModal()
        // 问答列表
        let qaData = res[0]
        if (qaData.status === 200) {
          this.planList.total = qaData.data.data.total
          this.planList.list = qaData.data.data.list
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    // 计划列表
    async getPlanList () {
      let list = await mySubscribedPlan(this.searchData)
      return list
    },
    loadMore () {
      this.planList.isLoadingMore = true
      this.searchData.pageNum++
      this.getPlanList().then((res) => {
        if (res.data) {
          this.planList.list.push(...res.data.data.list)
        } else {
          this.searchData.pageNum--
          window.layui.layer.msg('数据加载失败，请重新加载')
        }
        this.planList.isLoadingMore = false
      })
    },
    // 下单购买计划
    buy (planInfo) {
      if (!this.me.riskTest) {
        this.ctrlEvaluatingBox()
        return
      }
      this.$router.push('/plan/pay/' + planInfo.planId)
    },
    ctrlEvaluatingBox () {
      this.showEvaluatingBoxFlag = !this.showEvaluatingBoxFlag
    }
  }
}
</script>

<style scoped lang="scss">
.load-more{
  display: block;
  width: 94%;
  height: 38px;
  border: 1px solid #e6e6e6;
  color: #808080;
  border-radius: 5px;
  background: #fff;
  margin: 20px auto;
}
</style>
